<template>
	<view>
		<uni-transition ref="fade" class="xw-popup" :style="'z-index:'+zIndex" :show="isShow && overlay"
			@click="clickOverlay" />
		<uni-transition mode-class="slide-bottom" class="popup-bottom"
			:styles="{'width':'100%','border-radius':round?'32rpx 32rpx 0 0':'','z-index':zIndex+1}" :show="isShow">
			<view class="action-title" v-if="title">{{title}}</view>
			<view class="action-description" v-if="description">{{description}}</view>
			<view v-for="(item,i) in actions" :key="i">
				<view class="action-disabled" v-if="item.disabled">{{item.username}}</view>
				<view class="action-item item-click" v-else @click="select(item,i)">
					<text :style="'color:'+item.color">{{item.username}}</text>
					<!-- <view class="action-text" v-if="item.subname">{{item.subname}}</view> -->
				</view>
			</view>
			<view class="action-bottom" v-if="cancelText">
				<view class="bottom-top"></view>
				<view class="bottom-btn btn-click" @click="cancel">{{cancelText}}</view>
			</view>
			<view class="bottom-safe" v-if="safeAreaInsetBottom"></view>
		</uni-transition>
	</view> 
</template>

<script>
	export default { 
		props: {
			zIndex: {
				type: Number,
				default: 2022,
			},
			actions: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: '',
			},
			cancelText: {
				type: String,
				default: '',
			},
			description: {
				type: String,
				default: '',
			},
			round: {
				type: Boolean,
				default: true,
			},
			overlay: {
				type: Boolean,
				default: true,
			},
			safeAreaInsetBottom: {
				type: Boolean,
				default: true,
			},
			closeOnClickAction: {
				type: Boolean,
				default: true,
			},
			closeOnClickOverlay: {
				type: Boolean,
				default: true,
			},
		},
		//components: {
			//uniTransition
		//},
		data() {
			return {
				isShow: false,
			}
		},
		created() {

		},
		methods: {
			open() {
				this.isShow = true
				this.$emit('open')
			},
			close() {
				this.isShow = false
				this.$emit('close')
			},
			cancel() {
				this.close()
				this.$emit('cancel')
			},
			clickOverlay() {
				if (!this.closeOnClickOverlay) return false
				this.close()
				this.$emit('click-overlay')
			},
			select(item, index) {
				this.$emit('select', item, index)
				if (this.closeOnClickAction) this.close()
			}
		}
	}
</script>

<style lang='scss' scoped>
	view {
		box-sizing: border-box;
	}

	.xw-popup {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
	}

	.popup-bottom {
		width: 100%;
		/* border-radius: 32rpx 32rpx 0 0; */
		background: #fff;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;

		.action-title {
			width: 100%;
			font-size: 32rpx;
			line-height: 96rpx;
			text-align: center;
		}

		.action-description {
			margin: 0 32rpx;
			padding: 40rpx 0;
			color: #969799;
			font-size: 28rpx;
			line-height: 40rpx;
			text-align: center;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.action-item {
			width: 100%;
			padding: 28rpx 32rpx;
			font-size: 32rpx;
			background: #fff;
			cursor: pointer;
			text-align: center;

			.action-text {
				width: 100%;
				margin-top: 16rpx;
				color: #969799;
				font-size: 24rpx;
				line-height: 36rpx;
			}
		}

		.action-disabled {
			width: 100%;
			cursor: not-allowed;
			color: #c8c9cc;
			padding: 28rpx 32rpx;
			font-size: 32rpx;
			background: #fff;
			text-align: center;
		}

		.item-click:active {
			background: #f5f5f5;
		}

		.action-bottom {
			width: 100%;

			.bottom-top {
				display: block;
				height: 16rpx;
				background: #f7f8fa;
			}

			.bottom-btn {
				cursor: pointer;
				width: 100%;
				text-align: center;
				padding: 28rpx 32rpx;
				font-size: 32rpx;
				background: #fff;
			}

			.btn-click:active {
				background: #f5f5f5;
			}
		}

		.bottom-safe {
			height: constant(safe-area-inset-bottom);
			width: 100%;
			background: #fff;
		}
	}
</style>
